<template>
	<view>
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_item_bj"></view>
		<view class="page_content_box">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="dispatch_title">
				你有1个派单，倒计时结束后未操作将自动拒绝
			</view>

			<view class="scroll_item_order_box" v-if="info!=null">

				<view class="orderInfo">
					<view class="li">
						<view class="top">
							<view class="fl">
								<view class="h1"><text>￥</text>{{info.price_complete.rider_actual_price}}</view>
							</view>
							<view class="fr" v-if="info.is_pre_order!=1&&(info.status=='PENDING' || info.status=='GRABBED' || info.status=='PICKUP' || info.status=='DELIVERING')">
								<template v-if="info.delay_delivery_time[0]>=0">
									<view class="h2">{{info.delay_delivery_time[0]}}分钟内</view>
									<view class="h3">({{info.delay_delivery_time[1].slice(11,16)}})前送达</view>
								</template>
								<template v-if="info.delay_delivery_time[0]<0">
									<view class="h2">[已超时]{{info.delay_delivery_time[1].slice(5,16)}}</view>
									<view class="h3">前送达</view>
								</template>
							</view>
							<view class="fr" v-if="info.is_pre_order==1&&(info.status=='PENDING' || info.status=='GRABBED' || info.status=='PICKUP' || info.status=='DELIVERING')">
								<view class="h1">
									<image src="../../static/images/icon06.png"></image>
									<text>预</text>
								</view>
								<view class="h2" v-if="info.delay_delivery_time[0]<0">[已超时]</view>

								<view class="h2" v-if="info.delay_delivery_time">{{info.delay_delivery_time[1].substring(5,22)}}</view>
								<!--									<view class="h3">送达</view>-->
							</view>
							<view class="fr" v-if="info.status!='PENDING' && info.status!='GRABBED' && info.status!='PICKUP' && info.status!='DELIVERING'">
								<!--<view class="h2">12分钟内</view>
                                <view class="h3">(12)前送达</view>-->
							</view>
						</view>
						<view class="center">
							<view class="start">
								<view class="fl">
									<view class="h1">
										<view class="h1Fl">
											<view class="point"></view>
											<view class="distance">
												<view class="num">{{info.receiver_address_detail_complete.rider}}</view>
												<view class="km">KM</view>
											</view>
										</view>
										<view class="h1Fr">
											<view class="big" v-if="info.merchant">{{info.merchant.shop_name?info.merchant.shop_name:'--'}}</view>
											<view class="small">{{info.sender_address}}</view>
										</view>
									</view>
									<view class="h2">
										<image src="../../static/images/icon07.png"></image>
										<view class="h2Con">
											<view class="num">{{info.sender_address_detail_complete.rider}}</view>
											<view class="km">KM</view>
										</view>
									</view>
								</view>
								<view class="fr">
									<image src="../../static/images/icon46.png" @click.stop="handleMap(info.sender_address_detail_complete,info.sender_address)"></image>
								</view>
							</view>
							<view class="end">
								<view class="fl">
									<view class="h1">
										<view class="h1Fl">
											<view class="point"></view>
											<view class="distance">
												<view class="num">{{info.sender_address_detail_complete.rider}}</view>
												<view class="km">KM</view>
											</view>
										</view>
										<view class="h1Fr">
											<view class="big">{{info.receiver_address}}</view>
											<view class="small">
												备注：<text>{{info.remark}}</text>
											</view>
											<view class="phone">
												<!--<view class="h4" @click.stop="handleCustomer()">
													<text>{{info.receiver}}:{{info.receiver_phone.slice(0,3)}}****<text>{{info.receiver_phone.slice(7,11)}}</text></text>
													<image src="../../static/images/icon47.png"></image>
												</view>-->
												<view class="h5" v-if="info.type == 1">外卖配送</view>
												<view class="h5" v-if="info.type == 2">帮送</view>
												<view class="h5" v-if="info.type == 3">帮取</view>
												<view class="h5" v-if="info.type == 4">一对一</view>
												<view class="h5" v-if="info.type == 5">帮我买</view>
											</view>
										</view>
									</view>
								</view>
								<view class="fr">
									<image src="../../static/images/icon46.png" @click.stop="handleMap(info.receiver_address_detail_complete,info.receiver_address)"></image>
								</view>
							</view>
							<!--<view class="notes">
								<view class="h1">备注：</view>
								<view class="h2">{{info.item_type ? info.item_type + ',' : ''}}{{info.delivery_method1 ? info.delivery_method1 + '，' : ''}}{{info.remark}}</view>
							</view>-->
							<view class="timeTip">
								<text style="color: #418aff;">{{second}}秒</text>后自动拒绝
							</view>
							<view class="scroll_item_order_btn_box">
								<view class="scroll_item_order_btn1" hover-class="hover_class"
									  @click.stop="handleRefuse()">拒绝接单</view>
								<view class="scroll_item_order_btn2" hover-class="hover_class"
									  @click.stop="handleGrab()">抢 单</view>
							</view>
						</view>
					</view>
				</view>

				<!--<view class="scroll_item_order_top_box">
					<view class="scroll_item_order_top_time"  v-if="info.is_pre_order!=1&&(info.status=='PENDING' || info.status=='GRABBED' || info.status=='PICKUP' || info.status=='DELIVERING')">
						<text v-if="info.delay_delivery_time[0]>=0">
							<text style="font-weight: bold;">{{info.delay_delivery_time[0]}}分钟内 </text>
							<text style="color: #333;">(</text>
							<text style="color: #333;">
							{{info.delay_delivery_time[1].slice(11,16)}}
							</text>
							<text style="color: #333;">前)送达</text>
						</text>
						<text v-if="info.delay_delivery_time[0]<0">
							<text style="font-weight: bold;">[已超时]{{info.delay_delivery_time[1].slice(5,16)}} </text>
							<text style="color: #333;">前送达</text>
						</text>
					</view>
					<view class="scroll_item_order_top_time" v-if="info.is_pre_order==1&&(info.status=='PENDING' || info.status=='GRABBED' || info.status=='PICKUP' || info.status=='DELIVERING')">
						<text class="yu">预</text>
						<text style="font-weight: bold;">
							<text v-if="info.delay_delivery_time[0]<0"> [已超时]</text>{{info.delay_delivery_time[1].slice(5,16)}}
						</text>
						<text style="color: #333;">送达 </text>
					</view>
					<view class="scroll_item_order_top_price" style="margin-left: 28rpx;">
						<view class="scroll_item_order_top_price_tip" v-if="info.price_complete.bad_weather!=0">含天气奖励¥{{info.price_complete.bad_weather}}</view>
						<view class="scroll_item_order_top_price_tip" v-if="info.price_complete.bad_weather==0&&info.price_complete.special_time_fee!=0">含时段奖励¥{{info.price_complete.special_time_fee}}</view>
						<view class="scroll_item_order_top_price_num" v-if="info.price_complete">
							<text>¥</text>{{info.price_complete.rider_actual_price}}
						</view>
					</view>
				</view>
				<view class="scroll_item_order_center_box">
					<view class="qu_address_item_box" >
						<view class="qu_address_item_left_box" >
							<view class="qu_address_icon_box_content">
								<view class="qu_address_icon_box">
									<image
										src="https://www.cccshansong.com/chong_weapp/qu_icon.png"
										mode="" ></image>
									<view class="qu_address_distance_title" style="color: #333;font-size: 28rpx;font-weight: bold;">{{info.receiver_address_detail_complete.rider}}</view>
									<view class="qu_address_distance_title" style="color: #606266;font-size: 18rpx;margin-top: -6rpx;">KM</view>
								</view>
								<view class="qu_address_xian_box">
									<image
										src="https://www.cccshansong.com/chong_weapp/qu_address_xian_box1.png"
										mode="" ></image>
								</view>
							</view>

							<view class="qu_address_box">
								<view class="qu_address_title">{{info.merchant.shop_name}}</view>
								<view class="qu_address_desc" style="padding-bottom: 6rpx;">{{info.sender_address}}
								</view>
							</view>
						</view>
						<view class="dh_icon_box" @click.stop="handleMap(info.sender_address_detail_complete,info.sender_address)">
							<image
								src="https://www.cccshansong.com/chong_weapp/dh_icon.png"
								mode=""></image>
						</view>
					</view>
					<view class="qu_address_item_box" >
						<view class="qu_address_item_left_box">
							<view class="qu_address_icon_box_content">
								<view class="qu_address_icon_box">
									<image
										src="https://www.cccshansong.com/chong_weapp/song_icon.png"
										mode="" ></image>
									<view class="qu_address_distance_title" style="color: #333;font-size: 28rpx;font-weight: bold;">{{info.sender_address_detail_complete.rider}}</view>
									<view class="qu_address_distance_title" style="color: #606266;font-size: 18rpx;margin-top: -6rpx;">KM</view>
								</view>
							</view>

							<view class="qu_address_box">
								<view class="qu_address_title">{{info.receiver_address}}</view>
							</view>
						</view>
						<view class="dh_icon_box"
							@click.stop="handleMap(info.receiver_address_detail_complete,info.receiver_address)">
							<image
								src="https://www.cccshansong.com/chong_weapp/dh_icon.png"
								mode=""></image>
						</view>
					</view>
					<view class="scroll_item_order_status_box">
						<view class="scroll_item_order_status">外卖配送</view>
						<view class="scroll_item_order_no_score" v-if="info.source==1">麦芽田</view>
						<view class="scroll_item_order_no_score" v-if="info.source==2">青云</view>
						<view class="scroll_item_order_no_right" v-if="info.order_sequence!=null"><text>#</text>{{info.order_sequence}}</view>
					</view>
				</view>
				<view class="scroll_item_order_remark_box" v-if="info.remark!=null">
					<text>备注：</text>{{info.remark}}
				</view>
				<view class="scroll_item_order_remark_box" style="text-align: center;font-weight: bold;">
					<text style="color: rgba(255, 107, 0, 1);">{{second}}秒</text>后自动拒绝
				</view>
				<view class="scroll_item_order_btn_box">
					<view class="scroll_item_order_btn1" hover-class="hover_class"
						@click.stop="handleRefuse()">拒绝接单</view>
					<view class="scroll_item_order_btn2" hover-class="hover_class"
						@click.stop="handleGrab()">抢 单</view>
				</view>-->
			</view>
		</view>
		<wyb-popup ref="payTipNewPopup" type="center" height="544" width='640' radius="16" :showCloseIcon="false">
			<view class="xiuxi_popup_bj">
				<view style="height: 74rpx;"></view>
				<view class="xiuxi_popup_tip_img" style="width: 144rpx;height: 144rpx;">
					<image src="https://www.cccshansong.com/chong_weapp/pay_tip_icon.png"
						mode="">
				</view>
				<view class="xiuxi_popup_tip_text" style="margin-top: 30rpx;padding-left: 30rpx;padding-right: 30rpx;">
					您的保证金余额不足，请及时缴纳，避免影响到您正常接单！</view>
			</view>
			<view class="pay_popup_box">
				<view class="pay_popup_btn1" hover-class="hover_class" @click="goPay()">立即缴纳</view>
			</view>
		</wyb-popup>
		<map id="myMap" style="display: none;"/>
	</view>
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			wybPopup,
			navigationCustom,
		},
		data() {
			return {
				max_count_tip:'',
				grab_btn_status:true,
				userinfo:{},
				user_status: 1, //1上线  0休息
				refuse_btn_status:true,
				id:'',
				info:null,
				timer:null,
				second: 30,
				statusHeight: 0,
				config: {
					title: "", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#303133", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back1.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
			};
		},
		onLoad(e) {
			var a = this
			a.id = e.id
			a.statusHeight = uni.getSystemInfoSync().statusBarHeight  + 48
			a.getStatus()
			a.getDetail()
			a.timer = setInterval(() => {
			      if (a.second > 0) {
			        a.second--;
			      } else {
			        a.handleCountdownEnd();
			        clearInterval(a.timer); // 停止定时器
			      }
			}, 1000);
		},
		beforeDestroy() {
		    clearInterval(this.timer); // 组件销毁时清除定时器
		},
		onHide() {
			  // clearInterval(this.timer); // 组件销毁时清除定时器
		},
		onUnload() {
			  clearInterval(this.timer); // 组件销毁时清除定时器
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 60) {
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.opacity = 1
				a.config.bgcolor = 'rgba(255,255,255,0.2)'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(255,255,255,0.4 )'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(255,255,255,1)'
			}
			if (res.scrollTop < 50) {
				a.opacity = 0
			}
			if (res.scrollTop == 0) {
				a.opacity = 0
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
		},
		methods: {
			onPlayAudio(index) {
				var type = index
				var audio_src = '';

				if (type == 1) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/xindingdan_new1_new1.mp3'; //新订单
				} else if (type == 2) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/tuikuan_new1_new1.mp3'; //退款取消
				} else if (type == 3) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/paidan_new1_new1.mp3'; //派单
				} else if (type == 4) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/zhuan_succ_new11.mp3'; //转单成功
				} else if (type == 5) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/zhuan_fail_new11.mp3'; //转单失败
				} else if (type == 6) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/shangxian_new_new1.mp3'; //上线
				} else if (type == 7) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/xiuxi_new1_new1.mp3'; //下线
				} else if (type == 8) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/qiang_succ_new.mp3'; //抢单成功
				} else if (type == 9) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/qiang_fail_new5.mp3'; //抢单失败
				} else if (type ==10) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/max_count.mp3'; //到达最大接单数量
				} else if (type ==11) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/daodian1.mp3'; //已到店
				} else if (type ==12) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/quhuo1.mp3'; //已取货
				} else if (type ==13) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/chaoshi1.mp3'; //快超时
				} else if (type ==14) {
					audio_src =
						'https://www.cccshansong.com/chong_weapp/music/songda1.mp3'; //已送达
				}

				var music = null;
				music = uni.createInnerAudioContext(); //创建播放器对象
				music.src = audio_src; //这里引入自己生成的mp3音频文件地址
				music.play(); //执行播放
				music.onEnded(() => {
					//播放结束
					music = null;
				});


			},
			goPay() {
				var a = this
				a.$refs.payTipNewPopup.hide();
				uni.navigateTo({
					url: '/pages/user/userBond'
				})
			},
			getStatus(){
				var a = this
				a.globalajax('user/info', {}, 'GET', function(res) {
					console.log(res);
					uni.hideLoading()
					uni.stopPullDownRefresh()
					if (res.data.code == 200) {
						a.userinfo = res.data.data
						a.user_status = res.data.data.info.is_work
					} else {
						a.showError(res.data.msg);
					}
				});
			},
			handleGrab() {
				var a = this
				if(a.user_status!=1){
					uni.showToast({
						title:'请先上线',
						icon:'none'
					})
				}else{
					var temp_delivery_reminder = a.userinfo.delivery_reminder * 1
					var temp_deposit = a.userinfo.info.deposit * 1
					if (temp_deposit < temp_delivery_reminder) {
						a.$refs.payTipNewPopup.show();
					}else{
						if(a.grab_btn_status){
							a.grab_btn_status = false
							uni.showLoading({
								title:'抢单中'
							})
							a.globalajax('order/grabOrders', {
								id: a.id,
							}, 'GET', function(res) {
								console.log(res);
								uni.hideLoading()
								setTimeout(()=>{
									a.grab_btn_status = true
								},1500)
								if (res.data.code == 200) {
									if (res.data.data == 0) {
										a.onPlayAudio(9)
										uni.showToast({
											title: res.data.msg,
											icon: 'none'
										})
										setTimeout(() => {
											uni.navigateBack()
										}, 200)
									} else if (res.data.data == 1) {
										setTimeout(() => {
											uni.navigateBack()
										}, 200)
										a.onPlayAudio(8)
										uni.showToast({
											title: '抢单成功',
											icon: 'none'
										})
									}else if (res.data.data == 2) {
										// 已到最大接单数量

										setTimeout(() => {
											uni.navigateBack()
										}, 200)
										uni.showToast({
											title: '抢单失败',
											icon: 'none'
										})
										a.onPlayAudio(10)
									}
								} else {
									a.showError(res.data.msg);
								}
							});

						}

					}
				}
			},
			handleRefuse() {
				var a = this
				if (a.refuse_btn_status) {
					a.refuse_btn_status = false
					uni.showLoading({
						title: '加载中'
					})
					a.globalajax('order/OrderRefuse', {
						id: a.id
					}, 'GET', function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						setTimeout(() => {
							a.refuse_btn_status = true
						}, 1500)
						if (res.data.code == 200) {
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 200)
						} else {
							a.showError(res.data.msg);
						}
					});
				}
			},
			handleMap(address,address_text) {
				console.log(address)

				if (plus.runtime.isApplicationExist({ pname: 'com.autonavi.minimap', action: 'iosamap://' })) {
					let url = `amapuri://route/plan?sourceApplication=yourAppName&dlat=${Number(address.lat)}&dlon=${Number(address.lng)}&dev=0&t=3&style=0&start=&auto=1&rtdType=1&dname=${address_text}`;
					plus.runtime.openURL(url);
				}  else {
					uni.showToast({
						title: '当前未安装 高德地图 无法导航',
						icon: 'none',
						duration: 3000
					});
				}
			},
			getDetail(){
				var a =this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('order/orderInfo',{
					id:a.id
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							var temp_obj = res.data.data
							temp_obj.price_complete = JSON.parse(temp_obj.price)
							temp_obj.receiver_address_detail_complete = JSON.parse(temp_obj.receiver_address_detail)
							temp_obj.sender_address_detail_complete = JSON.parse(temp_obj.sender_address_detail)

							a.info = temp_obj

						}else{
							a.showError(res.data.msg);
						}
					}
				);
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleCountdownEnd() {
			    // 在倒计时结束后执行的方法
				console.log('退出了')
			    uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
	.pay_popup_box {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 56rpx;

		.pay_popup_btn {
			width: 286rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border: 2rpx solid rgba(228, 231, 237, 1);
			border-radius: 16rpx;
			font-size: 30rpx;
			color: rgba(36, 40, 49, 1);
		}

		.pay_popup_btn1 {
			width: 286rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 16rpx;
			font-size: 30rpx;
			color: #fff;
			margin-left: 20rpx;
			background-color: rgba(255, 107, 0, 1);
		}
	}
	.xiuxi_popup_bj {
		width: 640rpx;
		height: 356rpx;
		background-image: url('https://www.cccshansong.com/chong_weapp/xiuxi_popup_bj.png');
		background-size: 100% 100%;

		.xiuxi_popup_tip_img {
			width: 144rpx;
			height: 144rpx;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.xiuxi_popup_tip_text {
			text-align: center;
			font-weight: bold;
			color: rgba(36, 40, 49, 1);
			font-size: 40rpx;
			margin-top: 20rpx;
		}
	}
	.xiuxi_popup_btn_box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 70rpx;

		.xiuxi_popup_btn1 {
			width: 270rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: rgba(36, 40, 49, 1);
			font-size: 30rpx;
			border: 2rpx solid rgba(228, 231, 237, 1);
			border-radius: 16rpx;
		}

		.xiuxi_popup_btn2 {
			width: 270rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: rgba(255, 107, 0, 1);
			font-size: 30rpx;
			border: 2rpx solid rgba(255, 107, 0, 1);
			margin-left: 30rpx;
			border-radius: 16rpx;
		}
	}
	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.page_item_bj {
		width: 750rpx;
		height: 664rpx;
		background-image: url('../../static/images/png03.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.page_content_box {
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		.dispatch_title{
			color: #fff;
			font-size: 44rpx;
			font-weight: bold;
			margin-left: 32rpx;
			width: 75%;
			margin-bottom: 50rpx;
		}
		.scroll_item_order_box {
			width: 702rpx;
			min-height: 360rpx;
			padding-bottom: 24rpx;
			background-color: #fff;
			margin: 0 auto;
			border-radius: 16rpx;
			margin-bottom: 24rpx;

			.scroll_item_order_status_box {
				display: flex;
				align-items: center;
				// margin-left: 78rpx;
				margin-left: 24rpx;
				margin-top: 20rpx;
				.scroll_item_order_no_right{
					color: #242831;
					font-size: 50rpx;
					font-weight: bold;
					margin-left: 20rpx;
					text{
						margin-right: 6rpx;
						font-size: 30rpx;
					}
				}
				.scroll_item_order_no_score{
					margin-left: 20rpx;
					padding: 0 16rpx;
					height: 44rpx;
					line-height: 44rpx;
					font-size: 24rpx;
					border-radius: 6rpx;
					background-color: #fff;
					border: 2rpx solid #FF6B00;
					color: #FF6B00;
				}
				.scroll_item_order_status {
					height: 48rpx;
					line-height: 48rpx;
					padding: 0 16rpx;
					border-radius: 6rpx;
					background-color: rgba(255, 107, 0, 1);
					color: #fff;
					font-size: 24rpx;
				}

				.scroll_item_order_status1 {
					background-color: rgba(3, 214, 214, 1);
				}

				.scroll_item_order_status2 {
					background-color: rgba(0, 124, 239, 1);
				}

				.scroll_item_order_status3 {
					background-color: rgba(44, 190, 118, 1);
				}

				.scroll_item_order_status_phone {
					height: 48rpx;
					line-height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 16rpx;
					color: rgba(36, 40, 49, 1);
					font-size: 28rpx;
					border: 2rpx solid rgba(228, 231, 237, 1);
					border-radius: 6rpx;
					margin-right: 20rpx;

					text {
						color: rgba(255, 107, 0, 1);
					}

					image {
						width: 32rpx;
						height: 32rpx;
						margin-left: 14rpx;
					}
				}
			}

			.scroll_item_order_btn_box {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 26rpx;

				.scroll_item_order_btn1 {
					width: 228rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #fff;
					background-color: rgba(255, 168, 0, 1);
					border-radius: 12rpx;
					font-size: 32rpx;
					margin-right: 20rpx;
				}

				.scroll_item_order_btn2 {
					width: 414rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #fff;
					background-color: rgba(255, 107, 0, 1);
					border-radius: 12rpx;
					font-size: 32rpx;
				}

				.scroll_item_order_btn3 {
					height: 88rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 0 16rpx;
					margin-right: 20rpx;
					text{
						color: rgba(96, 98, 102, 1);
						font-size: 24rpx;
						padding-top: 10rpx;
						padding-bottom: 0;
					}
					image {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.scroll_item_order_btn4 {
					width: 544rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #fff;
					background-color: rgba(0, 117, 255, 1);
					border-radius: 12rpx;
					font-size: 32rpx;
				}

				.scroll_item_order_btn5 {
					width: 544rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #fff;
					background-color: rgba(44, 190, 118, 1);
					border-radius: 12rpx;
					font-size: 32rpx;
				}
			}

			.scroll_item_order_remark_box {
				width: 624rpx;
				// min-height: 64rpx;
				padding-top: 12rpx;
				padding-bottom: 12rpx;
				padding-left: 16rpx;
				padding-right: 16rpx;
				margin: 0 auto;
				margin-top: 24rpx;
				background-color: rgba(245, 246, 248, 1);
				font-size: 26rpx;
				color: rgba(96, 98, 102, 1);
				border-radius: 12rpx;

				text {
					color: rgba(48, 49, 51, 1);
				}
			}

			.scroll_item_order_center_box {
				margin-top: 10rpx;

				.qu_address_item_box {
					display: flex;
					justify-content: space-between;

					.dh_icon_box {
						width: 56rpx;
						height: 56rpx;
						margin-right: 20rpx;
						margin-top: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.qu_address_item_left_box {
						display: flex;
						margin-top: 14rpx;
						.qu_address_icon_box_content{
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							flex: 1;
							.qu_address_xian_box{
								width: 2rpx;
								margin-top: 10rpx;
								height: auto;
								min-height: 54rpx;
								background-color:rgba(124, 132, 156, 0.85);
								position: relative;
								flex: 1;
								.qu_address_xian_box_container{
									position: absolute;
									top: 50%;
									left: 50%;
									width:80rpx;
									// height: 24rpx;
									transform: translate(-50%, -50%);
									display: flex;
									flex-direction: column;
									align-items: center;
									justify-content: center;
									background-color: #fff;
								}
								image{
									position: absolute;
									top: 50%;
									left: 50%;
									width:20rpx;
									height: 24rpx;
									transform: translate(-50%, -50%);
								}
							}
							.qu_address_icon_box {
								width: 46rpx;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
								margin-top: 10rpx;
								image {
									width: 46rpx;
									height: 36rpx;
								}
							}
						}


						.qu_address_box {
							margin-left: 20rpx;

							.qu_address_title {
								color: rgba(36, 40, 49, 1);
								font-size: 36rpx;
								font-weight: bold;
								width: 454rpx;
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 4;
								line-clamp: 4;
								-webkit-box-orient: vertical;
							}

							.qu_address_desc {
								color: rgba(96, 98, 102, 1);
								font-size: 26rpx;
								width: 454rpx;
								// white-space: nowrap;
								// text-overflow: ellipsis;
								// overflow: hidden;
								// word-break: break-all;
								margin-top: 6rpx;
							}
						}
					}
				}


			}

			.scroll_item_order_top_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;

				.scroll_item_order_top_price {
					display: flex;
					align-items: center;
					padding-right: 20rpx;

					.scroll_item_order_top_price_tip {
						color: rgba(144, 147, 153, 1);
						font-size: 26rpx;
						margin-right: 10rpx;
					}

					.scroll_item_order_top_price_num {
						color: rgba(255, 107, 0, 1);
						font-size: 44rpx;
						font-weight: bold;

						text {
							font-weight: 400;
							font-size: 28rpx;
							margin-right: 6rpx;
						}
					}
				}

				.scroll_item_order_top_time {
					display: flex;
					align-items: center;
					color: rgba(255, 107, 0, 1);
					font-size: 26rpx;
					margin-left: 20rpx;
					.yu{
						display: inline-block;
						width: 50rpx;
						height: 40rpx;
						background-color: rgba(255, 168, 0, 1);
						text-align: center;
						line-height: 40rpx;
						color: #fff;
						font-size: 24rpx;
						margin-right: 10rpx;
						border-radius: 6rpx;
					}
					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}
				}
			}
		}
	}
	.orderInfo{
		padding: 0 12rpx;
		.li{
			padding: 16rpx 24rpx 24rpx 24rpx;
			margin-bottom: 32rpx;
			.top{
				height: 68rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #418AFF;
				.fl{
					display: flex;
					align-items: center;
					.h1{
						font-size: 48rpx;
						color: #FF3C26;
						font-weight: bold;
						text{
							font-size: 28rpx;
							font-weight: 400;
						}
					}
					.h2{
						width: 72rpx;
						height: 36rpx;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						border: 2rpx solid #418AFF;
						font-size: 20rpx;
						color: #418AFF;
						line-height: 36rpx;
						text-align: center;
						margin-left: 26rpx;
					}
				}
				.fr{
					display: flex;
					align-items: center;
					.h1{
						width: 74rpx;
						height: 40rpx;
						background: #FF9626;
						border-radius: 32rpx 8rpx 8rpx 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 25rpx;
							height: 24rpx;
						}
						text{
							font-size: 20rpx;
							color: #fff;
							margin-left: 8rpx;
							display: inline-block;
						}
					}
					.h2{
						font-size: 28rpx;
						color: #418AFF;
						margin-left: 8rpx;
					}
					.h3{
						font-size: 28rpx;
						color: #666;
					}
				}
			}
			.center{
				padding-top: 24rpx;
				.start{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.fl{
						flex: 1;
						padding-right: 25rpx;
						.h1{
							display: flex;
							align-items: center;
							.h1Fl{
								width: 55rpx;
								text-align: center;
								.point{
									display: inline-block;
									width: 16rpx;
									height: 16rpx;
									background: #418AFF;
									border-radius: 50%;
								}
								.distance{
									.num{
										font-size: 16rpx;
										color: #418AFF;
									}
									.km{
										font-size: 16rpx;
										color: #666;
									}
								}
							}
							.h1Fr{
								flex: 1;
								padding-left: 25rpx;
								.big{
									font-size: 32rpx;
									color: #333;
								}
								.small{
									font-size: 24rpx;
									color: #666;
									margin-top: 8rpx;
								}
							}
							/*&:after{
								content: '';
								display: block;
								width: 16rpx;
								height: 16rpx;
								background: #418AFF;
								position: absolute;
								left: 8rpx;
								top: 50%;
								transform: translateY(-50%);
								border-radius: 50%;
							}*/
						}
						.h2{
							display: flex;
							margin-top: 8rpx;
							align-items: center;
							padding-left: 10rpx;
							image{
								width: 32rpx;
								height: 62rpx;
							}
							.h2Con{
								text-align: center;
								.num{
									font-size: 16rpx;
									color: #418AFF;
								}
								.km{
									font-size: 16rpx;
									color: #666;
								}
							}
						}
					}
					.fr{
						image{
							width: 72rpx;
							height: 72rpx;
						}
					}
				}
				.end{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
					.fl{
						flex: 1;
						padding-right: 25rpx;
						.h1{
							display: flex;
							align-items: center;
							.h1Fl{
								width: 55rpx;
								text-align: center;
								.point{
									display: inline-block;
									width: 16rpx;
									height: 16rpx;
									background: #FF3C26;
									border-radius: 50%;
								}
								.distance{
									.num{
										font-size: 16rpx;
										color: #418AFF;
									}
									.km{
										font-size: 16rpx;
										color: #666;
									}
								}
							}
							.h1Fr{
								flex: 1;
								padding-left: 25rpx;
								.big{
									font-size: 32rpx;
									color: #333;
								}
								.small{
									font-size: 24rpx;
									color: #418AFF;
									display: flex;
									margin-top: 8rpx;
									text{
										color: #666;
									}
								}
								.phone{
									display: flex;
									align-items: center;
									justify-content: space-between;
									margin-top: 24rpx;
									.h4{
										height: 50rpx;
										border-radius: 8rpx 8rpx 8rpx 8rpx;
										border: 2rpx solid #418AFF;
										display: flex;
										align-items: center;
										justify-content: space-between;
										padding: 0 16rpx;
										box-sizing: border-box;
										text{
											font-size: 24rpx;
											color: #333;
										}
										image{
											width: 32rpx;
											height: 32rpx;
											margin-left: 32rpx;
										}
									}
									.h5{
										width: 160rpx;
										height: 50rpx;
										background: #418AFF;
										border-radius: 8rpx 8rpx 8rpx 8rpx;
										font-size: 24rpx;
										color: #fff;
										text-align: center;
										line-height: 50rpx;
									}
								}
							}
							/*&:after{
								content: '';
								display: block;
								width: 16rpx;
								height: 16rpx;
								background: #418AFF;
								position: absolute;
								left: 8rpx;
								top: 50%;
								transform: translateY(-50%);
								border-radius: 50%;
							}*/
						}
						.h2{
							display: flex;
							margin-top: 8rpx;
							align-items: center;
							padding-left: 10rpx;
							image{
								width: 32rpx;
								height: 62rpx;
							}
							.h2Con{
								text-align: center;
								.num{
									font-size: 16rpx;
									color: #418AFF;
								}
								.km{
									font-size: 16rpx;
									color: #666;
								}
							}
						}
					}
					.fr{
						image{
							width: 72rpx;
							height: 72rpx;
						}
					}
				}
				.notes{

					background: #EEEEEE;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					padding: 14rpx 16rpx;
					line-height: 35rpx;
					display: flex;
					/*align-items: center;*/
					margin-top: 24rpx;
					.h1{
						font-size: 24rpx;
						color: #333;
					}
					.h2{
						font-size: 24rpx;
						color: #666;
						flex:1;
					}
				}
				.timeTip{

					background: #EEEEEE;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					padding: 14rpx 16rpx;
					line-height: 35rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 24rpx;
					/*.h1{
						font-size: 24rpx;
						color: #333;
					}*/
					.h2{
						font-size: 24rpx;
						color: #666;
						flex:1;
					}
				}

				.scroll_item_order_btn_box {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 26rpx;

					.scroll_item_order_btn1 {
						width: 228rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						color: #fff;
						background-color: rgba(255, 168, 0, 1);
						border-radius: 12rpx;
						font-size: 32rpx;
						margin-right: 20rpx;
					}

					.scroll_item_order_btn2 {
						flex:1;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						color: #fff;
						background-color: #418AFF;
						border-radius: 12rpx;
						font-size: 32rpx;
					}

					.scroll_item_order_btn3 {
						height: 88rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 0 16rpx;
						margin-right: 20rpx;
						text{
							color: rgba(96, 98, 102, 1);
							font-size: 24rpx;
							padding-top: 10rpx;
							padding-bottom: 0;
						}
						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					.scroll_item_order_btn4 {
						width: 544rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						color: #fff;
						background-color: rgba(0, 117, 255, 1);
						border-radius: 12rpx;
						font-size: 32rpx;
					}

					.scroll_item_order_btn5 {
						width: 544rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						color: #fff;
						background-color: rgba(44, 190, 118, 1);
						border-radius: 12rpx;
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>
